<template>
    <view class="smart-page">
        <!--页面标题头begin-->
        <view class="smart-page-head">
            <view class="smart-page-head-title">slider滑块</view>
        </view>
        <!--页面标题头end-->
        <view>显示当前View</view>
        <view><slider value="20" show-value="true" @change="sliderChange"></slider></view>
        <view>设置步长step</view>
        <view><slider value="20" show-value="true" @change="sliderChange" step="5"></slider></view>
        <view>设置最大值、最小值</view>
        <view><slider show-value="true" value="100" min="50" max="500"></slider></view>
        <view>设置颜色</view>
        <view>
            <slider activeColor="#4CD964" backgroundColor="#AA0000" block-color="#F0ADAE" block-size="15"></slider>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            /*改变当前slder值，触发事件函数*/
            sliderChange(e) {
                console.log('当前value值是: ' + e.detail.value);
            }
        }
    }
</script>

<style>

</style>
